import { computed, defineComponent, ref } from 'vue';
import BasicFiltering from './BasicFiltering.vue';
import BehaviorDialog from './BehaviorDialog.vue';
import BehaviorMenu from './BehaviorMenu.vue';
import Clearable from './Clearable.vue';
import Coloring from './Coloring.vue';
import CreateListener from './CreateListener.vue';
import CreateListenerUnique from './CreateListenerUnique.vue';
import CreateNewValueMode from './CreateNewValueMode.vue';
import Decorators from './Decorators.vue';
import DesignOverview from './DesignOverview.vue';
import DisableReadonly from './DisableReadonly.vue';
import DisplayChips from './DisplayChips.vue';
import DisplayCustomValue from './DisplayCustomValue.vue';
import DisplaySelectedItemSlot from './DisplaySelectedItemSlot.vue';
import FilteringAddMultiple from './FilteringAddMultiple.vue';
import FilteringAddsToMenu from './FilteringAddsToMenu.vue';
import FilteringNoAddToMenu from './FilteringNoAddToMenu.vue';
import HtmlDisplayValue from './HtmlDisplayValue.vue';
import HtmlOptions from './HtmlOptions.vue';
import InputFilterAfter from './InputFilterAfter.vue';
import InputFilterLazy from './InputFilterLazy.vue';
import InputFilterMin from './InputFilterMin.vue';
import InputFilterOptions from './InputFilterOptions.vue';
import MenuTransitions from './MenuTransitions.vue';
import ModelMultipleCounter from './ModelMultipleCounter.vue';
import ModelSingleMultiple from './ModelSingleMultiple.vue';
import NativeForm from './NativeForm.vue';
import OptionCover from './OptionCover.vue';
import OptionCustomProps from './OptionCustomProps.vue';
import OptionEmitValue from './OptionEmitValue.vue';
import OptionLazyLoad from './OptionLazyLoad.vue';
import OptionMapOptions from './OptionMapOptions.vue';
import OptionNoneSlot from './OptionNoneSlot.vue';
import OptionObject from './OptionObject.vue';
import OptionQToggle from './OptionQToggle.vue';
import OptionSlot from './OptionSlot.vue';
import OptionString from './OptionString.vue';
import OptionsDynamic from './OptionsDynamic.vue';
import RenderPerf from './RenderPerf.vue';
import TextAutocomplete from './TextAutocomplete.vue';
import Demo from './1Demo.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo/>
          </div>
          <div class='block-'>
            <h5 class='title'>BehaviorDialog</h5>
            <BehaviorDialog />
          </div>
          <div class='block-'>
            <h5 class='title'>BehaviorMenu</h5>
            <BehaviorMenu />
          </div>
          <div class='block-'>
            <h5 class='title'>Clearable</h5>
            <Clearable />
          </div>
          <div class='block-'>
            <h5 class='title'>Coloring</h5>
            <Coloring />
          </div>
          <div class='block-'>
            <h5 class='title'>CreateListener</h5>
            <CreateListener />
          </div>
          <div class='block-'>
            <h5 class='title'>CreateListenerUnique</h5>
            <CreateListenerUnique />
          </div>
          <div class='block-'>
            <h5 class='title'>CreateNewValueMode</h5>
            <CreateNewValueMode />
          </div>
          <div class='block-'>
            <h5 class='title'>Decorators</h5>
            <Decorators />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignOverview</h5>
            <DesignOverview />
          </div>
          <div class='block-'>
            <h5 class='title'>DisableReadonly</h5>
            <DisableReadonly />
          </div>
          <div class='block-'>
            <h5 class='title'>DisplayChips</h5>
            <DisplayChips />
          </div>
          <div class='block-'>
            <h5 class='title'>DisplayCustomValue</h5>
            <DisplayCustomValue />
          </div>
          <div class='block-'>
            <h5 class='title'>DisplaySelectedItemSlot</h5>
            <DisplaySelectedItemSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>FilteringAddMultiple</h5>
            <FilteringAddMultiple />
          </div>
          <div class='block-'>
            <h5 class='title'>FilteringAddsToMenu</h5>
            <FilteringAddsToMenu />
          </div>
          <div class='block-'>
            <h5 class='title'>FilteringNoAddToMenu</h5>
            <FilteringNoAddToMenu />
          </div>
          <div class='block-'>
            <h5 class='title'>HtmlDisplayValue</h5>
            <HtmlDisplayValue />
          </div>
          <div class='block-'>
            <h5 class='title'>HtmlOptions</h5>
            <HtmlOptions />
          </div>
          <div class='block-'>
            <h5 class='title'>InputFilterAfter</h5>
            <InputFilterAfter />
          </div>
          <div class='block-'>
            <h5 class='title'>InputFilterLazy</h5>
            <InputFilterLazy />
          </div>
          <div class='block-'>
            <h5 class='title'>InputFilterMin</h5>
            <InputFilterMin />
          </div>
          <div class='block-'>
            <h5 class='title'>InputFilterOptions</h5>
            <InputFilterOptions />
          </div>
          <div class='block-'>
            <h5 class='title'>MenuTransitions</h5>
            <MenuTransitions />
          </div>
          <div class='block-'>
            <h5 class='title'>ModelMultipleCounter</h5>
            <ModelMultipleCounter />
          </div>
          <div class='block-'>
            <h5 class='title'>ModelSingleMultiple</h5>
            <ModelSingleMultiple />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionCover</h5>
            <OptionCover />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionCustomProps</h5>
            <OptionCustomProps />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionEmitValue</h5>
            <OptionEmitValue />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionLazyLoad</h5>
            <OptionLazyLoad />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionMapOptions</h5>
            <OptionMapOptions />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionNoneSlot</h5>
            <OptionNoneSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionObject</h5>
            <OptionObject />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionQToggle</h5>
            <OptionQToggle />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionSlot</h5>
            <OptionSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionString</h5>
            <OptionString />
          </div>
          <div class='block-'>
            <h5 class='title'>OptionsDynamic</h5>
            <OptionsDynamic />
          </div>
          <div class='block-'>
            <h5 class='title'>RenderPerf</h5>
            <RenderPerf />
          </div>
          <div class='block-'>
            <h5 class='title'>TextAutocomplete</h5>
            <TextAutocomplete />
          </div>
        </div>
      );
    };
  },
});
